<template>
	<view>
		<scroll-view @scrolltolower="scrolltolower" lower-threshold="10" :scroll-y="initialIsSticky" :style="{ height: props.scrollViewHeight + 'px' }">
			<view class="">
				<view class="tab">
					<view class="tab_flex">
						<view
							class="items"
							:class="index == data.active ? 'actitems' : ''"
							:style="{ width: itemWidth }"
							v-for="(item, index) in data.tabbarList"
							:key="index"
							@click="tabbarChange(index)"
						>
							{{ item.name }}
							<span >({{ item.num }})</span>
						</view>
					</view>
				</view>
				<loadstatusVue :status="data.loadStatus">
					<view class="content">
						<view class="right_item" @click="goInfo(item)" v-for="(item, index) in data.list" :key="index">
							<view class="right_item_block">
								<view class="">
									<image :src="item.imgFace" mode="aspectFill" :lazy-load="true"></image>
								</view>
								<view class="right_cont">
									<view class="">
										<view class="title">{{ item.name }}</view>
										<view class="tip flex">
											<view class="t1">{{ item.type }}</view>
											<view class="t2" v-if="item.sign == '1'">签到</view>
											<view class="t2">{{ item.lineType == 1 ? '线上' : '线下' }}</view>
										</view>
									</view>
									<view class="">
										<view class="user flex" v-if="item.createUser">
											<image v-if="item.createUser.img" :src="item.createUser.img" mode="aspectFill"></image>
											<image v-else src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/head.png" mode=""></image>
											<view class="">{{ item.createUser.name }}</view>
										</view>
										<view class="tips flex">
											<image src="/static/a1.png" mode=""></image>
											<view class="">{{ $formatDateTime(item.beginTime) }}</view>
										</view>
										<view style="margin-top: 6rpx" class="tips flex" v-if="item.lineType == 1">
											<image src="/static/a3.png" mode=""></image>
											<view class="">{{ item.platform }}</view>
										</view>
										<view style="margin-top: 6rpx" class="tips flex" v-else>
											<image src="/static/a2.png" mode=""></image>
											<view class="ts">{{ item.addressInfo }}</view>
										</view>
									</view>
								</view>
									<view class="zt" :class="`zt-${$formatStatus(item.verifyStatus)}`">
										{{ item.verifyStatus }}
									</view>
							</view>
							<view class="tss" v-if="item.verifyStatus == '已驳回'">驳回原因：{{ item.verifyDesc }}</view>
							<view class="bottom flex_jc_sb" @click.stop>
								<view class="text_flex" v-if="item.signUserList.length != 0">
									<view class="avatar-stack">
										<view v-for="(its, ind) in item.signUserList.slice(0,3)" :key="ind" class="avatar-item" :style="{ left: `${ind * 20}rpx` }">
											<image v-if="its.img" :src="its.img" mode="aspectFill" ></image>
											<image v-else src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/head.png" mode="aspectFill"></image>
										</view>
									</view>
									<view class="tests">{{ item.signUserList.length }}/{{ item.maxCount }} 人报名</view>
								</view>
								<view class="" v-else></view>
								<view class="flex">
									<view class="" v-if="data.active != 2">
										<!-- // selfSign 0 未报名 1已报名 -->
										<view class="btn" v-if="item.end == '0'&&  item.selfSign == '0' && item.sign == '1'">去签到</view>
									</view>
									<view class="btn btn1" v-if="item.end == '1'">已结束</view>
									<view class="flex" v-if="item.verifyStatus == '已驳回'">
										<view class="btn btn2" style="margin-right: 20rpx" @click="$pageGo(`/mypage/activity/activity?sendType=setList&&id=${item.id}`)">修改</view>
										<view class="btn btn2" @click="handleRemove(item)">删除</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</loadstatusVue>
			</view>
			<uni-popup ref="popupRef" type="center">
				<view class="globalPopup">
					<uni-icons @click="close" type="closeempty" size="20" class="close" color="#AEAEAE"></uni-icons>
					<view class="title">确认导出</view>
					<view class="content">是否确认导出活动？</view>
					<view class="btns flex_jc_sb">
						<view class="bt b1" @click="close">取消</view>
						<view class="bt b2">确认</view>
					</view>
				</view>
			</uni-popup>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, computed, onMounted } from 'vue';
import loadstatusVue from '@/components/loadstatus/loadstatus.vue';
import { getActivityList, removeActivity,activityCount} from '@/api/activity.js';
import { toast, showConfirm } from '@/utils/common.js';
const data = reactive({
	tabbarList: [
		{
			name: '待参加',
			url: '/mini/activity/partake/list/no',
			num: 0
		},
		{
			name: '已参加',
			url: '/mini/activity/partake/list/yes',
			num: 0
		},
		{
			name: '已发起',
			url: '/mini/activity/self/list',
			num: 0
		}
	],
	active: 0,
	list: [],
	loadStatus: 'before', // 加载状态
	hasMore: true, // 是否有更多数据
	isLoading: false, // 防止重复请求的锁
	queryParams: {
		url: '',
		pageNum: 1,
		pageSize: 10
	}
});
const itemWidth = computed(() => {
	return `${100 / data.tabbarList.length}%`;
});
const popupRef = ref(null);
const close = () => {
	popupRef.value.close();
};
const handleSearch = () => {
	popupRef.value.open();
};
const tabbarChange = (e) => {
	data.active = e;
	data.queryParams.url = data.tabbarList[e].url;
	data.queryParams.pageNum = 1; // 重置页码
	getList(); // 重新加载
};

const props = defineProps({
	initialIsSticky: {
		type: Boolean,
		default: false
	},
	scrollViewHeight: {}
});
const scrolltolower = () => {
	if (data.hasMore && (data.loadStatus === 'success' || data.loadStatus === 'noMore') && !data.isLoading) {
		data.queryParams.pageNum++;
		getList(true);
	}
};

// 延迟函数
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
// 设置加载状态的方法
const setLoadStatus = (status, options = {}) => {
	data.loadStatus = status;
};
// 处理响应数据的通用方法
const handleResponseData = async (res, isLoadMore = false) => {
	// 如果是加载更多，确保loading状态至少显示500ms，避免闪烁
	if (isLoadMore) {
		await delay(500);
	}
	if (res.code == 200) {
		data.tabbarList[data.active].num = res.total;
		// 处理数据
		if (isLoadMore) {
			data.list.push(...res.rows);
		} else {
			data.list = res.rows || [];
		}
		// 判断是否有更多数据
		data.hasMore = res.rows && res.rows.length >= data.queryParams.pageSize;
		// 设置状态
		if (data.list.length === 0) {
			setLoadStatus('empty');
		} else if (!data.hasMore) {
			setLoadStatus('noMore');
		} else {
			setLoadStatus('success');
		}
		return true;
	}
	return false;
};
// 获取列表数据
const getList = async (isLoadMore = false) => {
	// 防止重复请求
	if (data.isLoading) return;
	try {
		data.isLoading = true;
		if (isLoadMore) {
			if (!data.hasMore) return;
			setLoadStatus('loading');
		} else {
			setLoadStatus('before');
			// 初始加载时显示loading至少1秒，避免闪烁
			await delay(300);
		}
		const res = await getActivityList(data.queryParams);
		const success = await handleResponseData(res, isLoadMore);
		if (!success) {
			// 请求失败的处理
			setLoadStatus(data.list.length === 0 ? 'empty' : 'success');
		}
	} catch (err) {
		await delay(300);
		setLoadStatus(data.list.length === 0 ? 'empty' : 'success');
	} finally {
		data.isLoading = false;
	}
};
const goInfo = (item) => {
	uni.navigateTo({
		url: `/pages/activity/info?id=${item.id}`
	});
};
const handleRemove = (item) => {
	showConfirm('是否要删除当前活动?').then((res) => {
		if (res.confirm) {
			removeActivity({ id: item.id }).then((res) => {
				if (res.code == 200) {
					toast('已删除');
					data.queryParams.pageNum = 1; // 重置页码
					getList();
				}
			});
		}
	});
};
onMounted(() => {
	data.queryParams.url = data.tabbarList[data.active].url;
	getList();
	activityCount({}).then(res=>{
		if(res.code == 200){
			data.tabbarList[0].num = res.data.partakeNoCont
			data.tabbarList[1].num = res.data.partakeYesCount
			data.tabbarList[2].num = res.data.sendCount
		}
	})
	uni.$once('changeGetList', function () {
		getList();
	});
});
</script>

<style lang="scss">
scroll-view ::-webkit-scrollbar {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	-webkit-appearance: none;
	background: transparent;
}
.tab {
	width: 750rpx;
	height: 72rpx;
	background: #f3f0e8;
	position: sticky;
	z-index: 4;
	top: 0%;
	.tab_flex {
		display: flex;
		height: 72rpx;
		align-items: center;
		.items {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #717171;
			text-align: center;
		}
		.actitems {
			font-weight: bold;
			font-size: 24rpx;
			color: #75613e;
		}
	}
}
.content {
	.right_item {
		width: 710rpx;
		background: #ffffff;
		margin: 0rpx auto 20rpx;
		border-radius: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		.right_item_block {
			display: flex;
			flex: 1;
			image {
				display: block;
				width: 140rpx;
				height: 190rpx;
				border-radius: 8rpx;
			}
			.right_cont {
				flex: 1;
				margin-left: 12rpx;
				display: flex;
				flex-direction: column;
				box-sizing: border-box;
				justify-content: space-between;
				width: 0;
				.title {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.tip {
					margin: 10rpx 0rpx 0rpx 0rpx;
					.t1 {
						padding: 0rpx 6rpx;
						height: 32rpx;
						background: #b19561;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 20rpx;
						color: #ffffff;
						line-height: 32rpx;
						margin-right: 10rpx;
					}
					.t2 {
						padding: 0rpx 6rpx;
						height: 28rpx;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 20rpx;
						color: #615b56;
						line-height: 28rpx;
						border: 1px solid #615b56;
						margin-right: 10rpx;
					}
				}
				.user {
					margin-top: 10rpx;
					image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 10rpx;
						border-radius: 12rpx;
					}
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #8f8f8b;
				}
				.tips {
					margin-top: 6rpx;
					image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 10rpx;
						border-radius: 12rpx;
					}
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #8f8f8b;
					.ts {
						flex: 1;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}
			.zt {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #8f8f8b;
			}
		}
		.tss {
			margin-top: 20rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 20rpx;
			color: #892b1b;
		}
		.bottom {
			margin-top: 12rpx;
			.btn {
				width: 128rpx;
				height: 40rpx;
				background: #e3d0ad;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #75613e;
				line-height: 40rpx;
				text-align: center;
				border: 1px solid #e3d0ad;
			}
			.btn1 {
				background: #f0f0f0;
				color: #979797;
				border: 1px solid #f0f0f0;
			}
			.btn2 {
				background: #fff;
				color: #979797;
				border: 1px solid #d1d1d6;
			}
		}
		.text_flex {
			display: flex;
			align-items: center;
			.tests {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #8f8f8b;
				margin-left: 8rpx;
			}
		}
		.avatar-stack {
			width: 70rpx;
			position: relative;
			display: inline-block;
			padding-right: 12rpx; /* 预留右侧空间 */
			height: 40rpx; /* 头像高度 */
		}
		.avatar-item {
			position: absolute;
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%; /* 圆形头像 */
			transition: transform 0.2s;
			top: 5rpx;
			image {
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%; /* 圆形头像 */
				border: 1px solid #fff;
			}
		}
	}
}
</style>
